@import "./../theme";
@import "./../var";

.rich-editor {
  border-radius: $radiusSmall;
  overflow: hidden;

  .tox {
    border-radius: $radiusSmall !important;
    border: 1px solid $borderColorPrimary !important;

    .tox-editor-header {
      .tox-mbtn {
        font-size: $fontSizeSmall !important;
        height: 1.5rem !important;
      }
    }

    .tox-toolbar__primary {
      border-top-color: $borderColorLight !important;
      background: $bgColorPrimary !important;
      border-bottom: 1px solid $borderColorLight;
    }

    .tox-toolbar__group {
      border-right: 1px solid $borderColorLight!important;
    }

    .tox-toolbar__overflow {
      background: url("data:image/svg+xml;charset=utf8,%3Csvg height='29px' viewBox='0 0 40 30px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='28px' width='100' height='1' fill='%23EBEEF5'/%3E%3C/svg%3E") left 0 top 0 #fff;
    }

    .tox-tbtn {
      font-size: $fontSizeSmall !important;
      height: 1.5rem !important;
      cursor: pointer;
      margin-left: 1px;

      svg {
        transform: scale(0.8);
        color: $colorTextPrimary;
      }

      &:hover {
        background-color: $bgColorPrimaryActive;

        svg {
          fill: $colorPrimary;
        }
      }

      &.tox-tbtn--enabled {
        background-color: $colorPrimaryDarken;

        svg {
          fill: $colorTextInverse;
        }
      }
    }

    //.tox-edit-area__iframe {
    //  background: $bgColorPrimary !important;
    //}
  }


  &.is-disabled {
    border-radius: $radiusRegular;

    .tox-editor-header {
      display: none !important;
    }

    .tox {
      border-color: $borderColorLighter !important;
    }

    //.tox-edit-area__iframe {
    //  background: #fafafa !important;
    //}
  }
}

.tox-tinymce-aux {
  z-index: 10000 !important;

  .tox-menu {
    border-color: $borderColorLight !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;

    .tox-collection__item {
      padding: 0.1rem 0.5rem !important;
      color: $colorTextPrimary;

      &:hover {
        background-color: $bgColorPrimaryActive;
      }

      &.tox-collection__item--active {
        background-color: $bgColorPrimaryActive;
      }
    }

    .tox-collection__group {
      border-color: $borderColorPrimary !important;
    }

    .tox-collection__item-label, .tox-collection__item-accessory {
      font-size: $fontSizeSmall !important;
      height: 1.5rem !important;
      min-width: 3rem;
    }

    svg {
      zoom: 0.8;
    }

  }
}
